<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../../vue.js"></script>
    <title>Document</title>
</head>

<body>
    <!-- 
        计算属性:
            1.定义:要用的属性不存在,要通过已有属性计算得来
            2.原理:Object.defineproperty方法提供getter和setter方法
            3.get函数什么时候执行?
                (1).初次读取会执行一次
                (2).当依赖数据发送改变时候会再次被调用
            4.优势: 与methods实现相比,内部缓存机制(复用),效率更高,调试方便
            5.备注:
                1.计算属性最终会出现在vm身上,直接读取使用即可.]
                2.如果计算属性要被修改,必须写set函数去响应修改,且st中要引起依赖的数据发送
     -->
    <div class="root">
        <!-- 插值语法 -->

        <!-- 姓名: <input type="text" name="" id="" v-model="name"><br>
        年龄: <input type="" name="" v-model="age">
        <hr>
        <h2>姓名:{{name.slice(0,3)}},年龄:{{age}}</h2> -->

        <!-- methods方法  -->

        <!-- 姓名: <input type="text" name="" id="" v-model="name"><br>
        年龄: <input type="" name="" v-model="age">
        <hr>
        <h2>{{fullName()}}<h2> -->

        <!-- 计算属性 -->
        姓名: <input type="text" name="" id="" v-model="name"><br>
        年龄: <input type="" name="" v-model="age">
        <hr>
        <h2>{{fullName}}<h2>
                <h2>{{fullName}}<h2>
    </div>
</body>
<script>
    const vm = new Vue({
        data() {
            return {
                name: 'lyl',
                age: 18
            }
        },
        // methods: {
        //     fullName(e) {
        //         return this.name.slice(0, 3) + '-' + this.age
        //     }
        // }
        computed: {
            // 完整写法,简写
            fullName(){
                return this.name + this.age
            }
            
            // // fullName: {
            //     // get 当有人读取fullName时,getter会被调用,返回值作为fullName的值
            //     // get什么时候被调用, 1.初次读取fullName时. 2.所依赖的数据发生变化时
            //     get() {
            //         return this.name.slice(0, 3) + '-' + this.age
            //     },
            //     // 当fullName被修改时调用
            //     set(value) {
            //         return console.log(`被修改为${value}`)
            //     }
            // }
        }
    }).$mount('.root')
</script>

</html>